<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>基本资料</span>
        <div class="edit-button-container">
          <el-button type="primary" @click="toggleEdit" v-if="!isEditing">修改</el-button>
          <el-button type="primary" @click="updateUser" v-if="isEditing">提交修改</el-button>
          <el-button type="primary" @click="endEdit" v-if="isEditing">取消</el-button>
        </div>
      </div>
    </template>
<!--    基础信息-->
    <div class="user-info-container">
      <el-image
          :src="userInfo.userPic || defaultImage "
          fit="cover"
          class="user-avatar">
        <template #error>
          <div class="image-error">封面加载失败</div>
        </template>
      </el-image>
      <el-row v-if="!isEditing">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">登录名称：</span>
            <span>{{ userInfo.username }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户昵称：</span>
            <span>{{ userInfo.nickname }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户邮箱：</span>
            <span>{{ userInfo.email }}</span>
          </div>
          <div class="info-item">
            <span class="label">用户电话：</span>
            <span>{{ userInfo.phone }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row v-else>
        <el-col :span="12">
          <el-form :model="userInfo" :rules="rules" label-width="100px" size="large">
            <el-form-item label="登录名称">
              <el-input v-model="userInfo.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="userInfo.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="用户电话" prop="email">
              <el-input v-model="userInfo.phone"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <!--    委托房源信息-->
    <div>
      <h2>委托房源</h2> <!-- 添加的标题 -->
      <el-row>
        <!-- 表格内容 -->
        <el-table :data="houseListData" style="width: 100% ;margin-top: 30px;" v-loading="loading">
          <el-table-column label="序号" width="60" type="index" />
          <el-table-column label="封面" prop="cover" width="120">
            <template #default="{ row }">
              <el-image
                  style="width: 80px; height: 80px; border-radius: 4px;"
                  :src="row.cover"
                  v-if="row.cover"
                  fit="cover"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                  </div>
                </template>
              </el-image>
              <span v-else>无封面</span>
            </template>
          </el-table-column>
          <el-table-column label="面积" prop="area">
            <template #default="{ row }">
              {{ row.area }}㎡
            </template>
          </el-table-column>
          <el-table-column label="价格" prop="price">
            <template #default="{ row }">
              ¥{{ row.price.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column label="地址" prop="address" />
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-tag
                  :type="{
              0: 'warning',
              1:'success',
              2: 'info',
              3: ''
            }[row.status]"
              >
                {{
                  {
                    0: '待审核',
                    1: '已发布',
                    2: '已下架',
                    3: '已成交'
                  }[row.status]
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="类型">
            <template #default="{ row }">
              <el-tag
                  :type="{
              0: 'warning',
              1:'success'
            }[row.type]"
              >
                {{
                  {
                    0: '售房',
                    1: '租房'
                  }[row.type]
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布日期" prop="publishTime" />
<!--          <el-table-column label="操作" width="180">-->
<!--            <template #default="{ row }">-->
<!--              <el-button-->
<!--                  :icon="Document"-->
<!--                  circle-->
<!--                  plain-->
<!--                  type="info"-->
<!--                  @click="handleEdit(row)"-->
<!--              />-->
<!--            </template>-->
<!--          </el-table-column>-->
          <template #empty>
            <el-empty description="暂无房源数据" />
          </template>

        </el-table>

        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
                       @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />




      </el-row>
    </div>

  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { updateUserInfo } from "@/api/user.js";
import { ElMessage } from "element-plus";
import { useUserInfoStore } from "@/stores/userinfo.js";
import defaultImage from "@/assets/imgmoren.png";
import {Document} from "@element-plus/icons-vue";
import {housesListService} from "@/api/housesList.js";


// 房源列表数据模型
const houseListData = ref([])

const userInfoStore = useUserInfoStore();
const userInfo = ref({
  ...userInfoStore.info
});

const isEditing = ref(false); // 控制是否处于编辑状态

const rules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    {
      pattern: /^\S{2,10}$/,
      message: '昵称必须是2-10位的非空字符串',
      trigger: 'blur'
    }
  ],
  email: [
    { required: true, message: '请输入用户邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
};

const updateUser = async () => {
  let resul = await updateUserInfo(userInfo.value);
  ElMessage.success('修改成功');
  userInfoStore.setInfo(userInfo.value);
  isEditing.value = false; // 修改成功后回到非编辑状态
};

const toggleEdit = () => {
  isEditing.value = true; // 进入编辑状态
};
const endEdit = () => {
  isEditing.value = false; // 退出编辑状态
};
const userinfoId = userInfoStore.info.id;
// 搜索条件数据模型
const searchForm = ref({
  landlordId: userinfoId,
  status:''
})
const onSizeChange = (size) => {
  pageSize.value = size
  // 重新获取数据
  housesList()
}
// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  // 重新获取数据
  housesList()
}
// 分页条数据模型
const pageNum = ref(1) // 当前页
const total = ref(0) // 总条数
const pageSize = ref(15) // 每页条数
const loading = ref(false);
// 获取房源列表
const housesList = async () => {
  try {
    loading.value = true
    const result = await housesListService({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...searchForm.value
    })
    if (result && result.res) {
      houseListData.value = result.res.items
      total.value = result.res.total
    } else {
      console.error('接口返回数据格式不正确，缺少 data 属性')
      ElMessage.error('加载房源列表失败，接口返回数据格式不正确')
    }
  } catch (error) {
    console.error('数据获取失败:', error)
    ElMessage.error('加载房源列表失败')
  } finally {
    loading.value = false
  }
}

housesList()

</script>

<style scoped>
.page-container {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.header {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-button-container {
  display: flex;
  align-items: center;
}

.user-info-container {
  text-align: center;
}

.user-avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.info-item {
  margin-bottom: 10px;
  text-align: left;
  font-size: 16px;
  color: #555;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  color: #333;
}

.el-form {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}
</style>
